<!--
 * @轮子的作者: 轮子哥
 * @Date: 2023-10-18 09:34:22
 * @LastEditTime: 2023-11-15 10:31:08
-->
<template>
    <div class="receive1">
        <div class="receive2">
            <div>
                <span style="font-weight: 700;">{{ $t('text.Contract.l130') }}</span>
                <span class="tag1" v-if="status == 0">{{ $t('text.Contract.l16') }}</span>
                <span class="tag2" v-if="status == 1">{{ $t('text.Contract.l19') }}</span>
                <span class="tag3" v-if="status == 2">{{ $t('text.Contract.l22') }}</span>
            </div>
            <DialogLayout52 :params="dataList" @returnData="getData">
                <el-button round style="height: 28px;color: #6698ff;border: 1px solid #6698ff;">{{ $t('text.Contract.l130')
                }}</el-button>
            </DialogLayout52>
        </div>

        <div style="overflow: auto;">
            <div v-for="item in dataList" :key="item">
                <div class="illustrate1">
                    <div class="illustrate2">{{ item.subjectName == null ? '-' : item.subjectName }}</div>
                    <div class="illustrate3">
                        {{ $t('text.Contract.l348') }}&ensp;{{ getAllPrice(item.priceVo?.mustRevenue, item.mustCosts) }}
                        &ensp;=&ensp;{{ $t('text.Contract.l350') }}
                        {{ item.priceVo?.mustRevenue == null ? '0' :String(item.priceVo?.mustRevenue).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + 'AED' }}
                        <span v-for="spanItem in item.mustCosts" :key="spanItem">
                            &ensp;-&ensp;{{ spanItem.name == null ? '-' : spanItem.name }}
                            {{ spanItem.ratio == null ? '' : '(' + spanItem.ratio + '%)' }}
                            {{ spanItem.cost == null ? '0' : String(spanItem.cost).replace(/\B(?=(\d{3})+(?!\d))/g, ',') +
                                'AED' }}
                        </span>
                    </div>

                    <div class="illustrate4">
                        {{ $t('text.Contract.l349') }}&ensp;{{ getAllPrice(item.priceVo?.realRevenue, item.realCosts) }}
                        &ensp;=&ensp;{{ $t('text.Contract.l351') }}
                        {{ item.priceVo?.realRevenue == null ? '0' :
                            String(item.priceVo?.realRevenue).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + 'AED' }}
                        <span v-for="spanItem in item.realCosts" :key="spanItem">
                            &ensp;-&ensp;{{ spanItem.name == null ? '-' : spanItem.name }}
                            {{ spanItem.ratio == null ? '' : '(' + spanItem.ratio + '%)' }}
                            {{ spanItem.cost == null ? '0' : String(spanItem.cost).replace(/\B(?=(\d{3})+(?!\d))/g, ',') +
                                'AED' }}
                        </span>
                    </div>
                </div>

                <div class="ov">
                    <table class="receive3">
                        <tr class="receive4">
                            <td class="receive5">{{ $t('text.Contract.l176') }}</td>
                            <td class="receive5">{{ $t('text.Contract.l177') }}</td>
                            <td class="receive5">{{ $t('text.Contract.l178') }}</td>
                            <td class="receive5">{{ $t('text.Contract.l179') }}</td>
                            <td class="receive5">{{ $t('text.Contract.l180') }}</td>
                        </tr>
                        <tr v-for="child in item.shares" :key="child">
                            <td class="receive6">
                                {{ child.roleName == null ? '-' : child.roleName }}&ensp;-&ensp;
                                {{ child.sysUserName == null ? '-' : child.sysUserName }}
                            </td>
                            <td class="receive6"> {{ child.ratio == null ? '-' : child.ratio + '%' }}</td>
                            <td class="receive6">{{ getRatioPrice(item.priceVo?.mustRevenue, item.mustCosts, child.ratio) }}
                            </td>
                            <td class="receive6">{{ getRatioPrice(item.priceVo?.realRevenue, item.realCosts, child.ratio) }}
                            </td>
                            <td class="receive6">
                                <CommonOmit :text="child.notes == null ? '-' : child.notes" :length="1"></CommonOmit>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

    </div>
</template>
    
<script>
import CommonOmit from "@/components/input/CommonOmit.vue";
import { meritShareFindList } from "../../http/api";
import DialogLayout52 from "@/components/dialogLayout/DialogLayout52.vue";

export default {
    name: "PerformanceAllocation",
    props: {
        status: [String, Number]
    },
    components: { CommonOmit, DialogLayout52 },
    data() {
        return {
            dataList: []
        }
    },
    mounted() {
        this.getData()
    },
    methods: {

        getData() {
            meritShareFindList({ contractId: this.$route.query.id }).then(res => {
                if (res !== undefined) {
                    this.dataList = res
                    console.log(res)
                }
            }).catch()
        },

        //获取总实收/应收
        getAllPrice(price, item) {
            let AllPrice = Number(price)
            if (isNaN(AllPrice)) { AllPrice = 0; return 0 }
            item.forEach(element => {
                let newCost = Number(element.cost)
                if (isNaN(newCost)) { newCost = 0 }
                AllPrice = AllPrice - newCost
            });
            return String(AllPrice).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + 'AED'
        },
        getRatioPrice(price, item, ratio) {
            let AllPrice = Number(price)
            if (isNaN(AllPrice)) { AllPrice = 0; return 0 }
            item.forEach(element => {
                let newCost = Number(element.cost)
                if (isNaN(newCost)) { newCost = 0 }
                AllPrice = AllPrice - newCost
            });
            let newRatio = Number(ratio)
            if (isNaN(newRatio)) { newRatio = 0 }
            AllPrice = AllPrice * newRatio / 100
            return String(AllPrice).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + 'AED'
        }
    },
    watch: {},
    computed: {},
}
</script>

<style scoped>
.illustrate1 {
    font-size: 13px;
    text-align: left;
}

.illustrate2 {
    color: black;
    font-weight: 700;
    padding-bottom: 7px;
    padding-top: 8px;
}

.illustrate3 {
    color: gray;
    padding-bottom: 5px;
}

.illustrate4 {
    color: gray;
}

.ov {
    overflow: auto;
    flex: 1;
    margin-top: 15px;
    margin-bottom: 30px;
    background: #f0f0f0;
    border-radius: 4px;
}

.tag1 {
    background-color: #cacaca;
    border-radius: 3px;
    height: 26px;
    margin: 0 10px;
    font-size: 12px;
    color: white;
    padding: 2px 5px;
}

.tag2 {
    background-color: #FFBE2129;
    border: 1px solid #FFBE21;
    border-radius: 3px;
    height: 26px;
    margin: 0 10px;
    font-size: 12px;
    color: #FFBE21;
    padding: 2px 5px;
}

.tag3 {
    background-color: #54d2d029;
    border: 1px solid #54d2d0;
    border-radius: 3px;
    height: 26px;
    margin: 0 10px;
    font-size: 12px;
    color: #54d2d0;
    padding: 2px 5px;
}

.receive1 {
    margin-left: 35px;
    margin-right: 35px;
    display: flex;
    flex-direction: column;
    padding-top: 10px;
    overflow: hidden;
}

.receive2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.receive3 {
    font-size: 13px;
    width: 100%;
    border-spacing: 0;
    padding: 0 20px;
}

.receive4 {
    position: sticky;
    top: 0;
    font-weight: 600;
}

.receive5 {
    background: #f0f0f0;
    border-bottom: 1px solid #bbb;
    height: 45px;
    position: sticky;
    top: 0;
    text-align: left;
    width: 18%;
}

.receive6 {
    border-bottom: 1px solid #ddd;
    height: 45px;
    text-align: left;
    width: 18%;
}
</style>